<!--  -->
<template>
  <div class="">
    <el-dialog
      title="通过信息"
      :visible.sync="dialogVisibleAccess"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-col :span="16" style="padding-left: 20px">
          <el-form-item prop="resaonId" label="退款原因：">
            <!-- <el-input v-model="ruleForm.name"></el-input> -->
            <el-select
              v-model="ruleForm.resaonId"
              filterable
              placeholder="请选择原因"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in refund"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" style="padding-left: 20px">
          <el-form-item prop="backFee" label="退款金额：">
            <el-input-number
              style="width: 100%"
              v-model="ruleForm.backFee"
              controls-position="right"
              placeholder="请填写实际退款金额"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="16" style="padding-left: 20px">
          <el-form-item prop="remark" label="备注：">
            <el-input
              v-model="ruleForm.remark"
              type="textarea"
              placeholder="如无法按照实际金额退款"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisibleAccess = false"
          icon="el-icon-circle-close"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="dosubmit('ruleForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="驳回信息"
      :visible.sync="dialogVisibleRefuse"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="refuse"
        :rules="refuserules"
        ref="refuse"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-col :span="16" style="padding-left: 20px">
          <el-form-item label="驳回原因" prop="resaonId">
            <!-- <el-input v-model="ruleForm.name"></el-input> -->
            <el-select
              v-model="refuse.resaonId"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in rejection"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" style="padding-left: 20px">
          <el-form-item prop="remark" label="备注:">
            <el-input v-model="refuse.remark" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisibleRefuse = false"
          icon="el-icon-circle-close"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="refuses('refuse')"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getDetail } from "@/api/rent/index";
import { getDicType } from "@/api/common";
import { getCompanyByPhone } from "@/api/common";
import { rejected, approved } from "@/api/rent/index";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dialogVisibleAccess: false,
      dialogVisibleRefuse: false,
      item: {},
      ruleForm: {
        resaonId: "",
        backFee: 0,
        remark: "",
      },
      rules: {
        resaonId: [
          { required: true, message: "请选择退款原因", trigger: "change" },
        ],
        backFee: [
          {
            required: true,
            message: "请填写正确金额",
            trigger: "change",
          },
        ],
        remark: [{ required: true, message: "请填写备注", trigger: "change" }],
      },
      refuse: {
        resaonId: "",
        remark: "",
      },
      refuserules: {
        resaonId: [
          { required: true, message: "请选择驳回原因", trigger: "change" },
        ],
        remark: [{ required: true, message: "请填写备注", trigger: "change" }],
      },
      that: this,
      gold: 0,
      paymentOptions: [],
      paymentStatusOptions: [],
      CompanyList: [],
      rejection: [],
      refund: [],
      id: "",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  filters: {
    isNotNull(value) {
      if (value) {
        return value;
      } else {
        return "/";
      }
    },
    paymentStatusFilter(value, that) {
      let str = "";
      that.paymentStatusOptions.forEach((item) => {
        if (item.value == value) {
          str = item.label;
        }
      });
      return str;
    },
    payTypeFilter(value, that) {
      let str = "";
      that.paymentOptions.forEach((item) => {
        if (item.value == value) {
          str = item.label;
        }
      });
      return str;
    },
  },
  // 方法集合
  methods: {
    dosubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert(valid);
          approved(
            this.id,
            this.ruleForm.resaonId,
            this.ruleForm.remark,
            this.ruleForm.backFee
          ).then((res) => {
            console.log(res);
            this.handleClose();
            this.$message.success("提交成功");
            this.$emit("refreshList");
            this.ruleForm = {
              resaonId: "",
              backFee: 0,
              remark: "",
            };
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });

      // console.log(this.ruleForm);
      // if (type == "access") {
      //   approved(
      //     this.id,
      //     this.ruleForm.resaonId,
      //     this.ruleForm.remark,
      //     this.ruleForm.backFee
      //   ).then((res) => {
      //     console.log(res);
      //     this.handleClose();
      //     this.$message.success("提交成功");
      //     this.$emit("refreshList");
      //     this.ruleForm = {
      //       isAllBack: 1,
      //       resaonId: "",
      //       backFee: "",
      //       remark: "",
      //     };
      //   });
      // } else {
      //   rejected(this.id, this.ruleForm.resaonId, this.ruleForm.remark).then(
      //     (res) => {
      //       this.handleClose();
      //       this.$message.success("提交成功");
      //       this.$emit("refreshList");
      //       this.ruleForm = {
      //         isAllBack: 1,
      //         resaonId: "",
      //         backFee: "",
      //         remark: "",
      //       };
      //     }
      //   );
      // }
    },
    refuses(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          rejected(this.id, this.refuse.resaonId, this.refuse.remark).then(
            (res) => {
              this.handleClose();
              this.$message.success("提交成功");
              this.$emit("refreshList");
              this.refuse = {
                isAllBack: 1,
                resaonId: "",
                remark: "",
              };
            }
          );
        } else {
          // console.log("error submit!!");
          return false;
        }
      });

      // console.log(this.ruleForm);
      // if (type == "access") {
      //   approved(
      //     this.id,
      //     this.ruleForm.resaonId,
      //     this.ruleForm.remark,
      //     this.ruleForm.backFee
      //   ).then((res) => {
      //     console.log(res);
      //     this.handleClose();
      //     this.$message.success("提交成功");
      //     this.$emit("refreshList");
      //     this.ruleForm = {
      //       isAllBack: 1,
      //       resaonId: "",
      //       backFee: "",
      //       remark: "",
      //     };
      //   });
      // } else {
      //   rejected(this.id, this.ruleForm.resaonId, this.ruleForm.remark).then(
      //     (res) => {
      //       this.handleClose();
      //       this.$message.success("提交成功");
      //       this.$emit("refreshList");
      //       this.ruleForm = {
      //         isAllBack: 1,
      //         resaonId: "",
      //         backFee: "",
      //         remark: "",
      //       };
      //     }
      //   );
      // }
    },

    handleClose() {
      this.dialogVisibleAccess = false;
      this.dialogVisibleRefuse = false;
    },
    init(status, id, gold) {
      // console.log()
      this.ruleForm.backFee = gold;
      this.id = id;
      status == "access"
        ? (this.dialogVisibleAccess = true)
        : (this.dialogVisibleRefuse = true);
      // getCompanyByPhone().then((res) => {
      //   this.CompanyList = res.data.data;
      // });
      // getDetail(id).then((res) => {
      //   this.item = res.data.data;
      // });
      getDicType("reasons_rejection").then((res) => {
        this.rejection = res.data.data;
      });
      getDicType("reasons_refund").then((res) => {
        this.refund = res.data.data;
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.itemAll {
  display: flex;
  flex-wrap: wrap;
  .items {
    width: 33%;
    padding: 10px 0px;
    display: flex;
    // align-items: center;
    span:first-child {
      width: 135px;
      text-align: right;
    }
    span:last-child {
      padding-left: 10px;
    }
  }
}
.bgc {
  background-color: aliceblue;
}

</style>